<template>
    <transition name="move">
    	<div class="food" v-show="showFlag" ref="food">
    		<div class="food-content">
    			<div class="image-header">
    				<img :src="food.image">
    				<i class="back iconfont icon-back" @click="hide"></i>
    			</div>
    			<div class="content">
    				<h1 class="title">{{food.name}}</h1>
    				<div class="detail">
    					<span class="sell-count">月售{{food.sellCount}}份</span>
    					<span class="rating">好评率{{food.rating}}%</span>
    				</div>
    				<div class="price">
    					<span class="now">￥{{food.price}} <s class="old" v-show="food.oldPrice">
    						{{food.oldPrice}}
    					</s></span>
    				</div>
    				<div class="cartcontrol-wrapper">
    					<cartcontrol @add="addFood" :food="food"></cartcontrol>
    				</div>
    				<transition name="fade">
    					<div class="buy" @click.stop.prevent="addFirst" v-show="!food.count||food.count===0">加入购物车</div>
    				</transition>
    			</div>
    			<split v-show="food.info"></split>
    			<div class="info" v-show="food.info">
    				<h1 class="title">商品信息</h1>
    				<p class="text">{{food.info}}</p>
    			</div>
    			<split></split>
    			<div class="rating">
    				<h1 class="title">商品评价</h1>
    				<ratingselect @select="selectRating" @toggle="toggleContent"  :selectType="selectType" :onlyContent="onlyContent" :desc="desc" :ratings="food.ratings"></ratingselect>
    				<div class="rating-wrapper">
    					<ul v-show="food.ratings && food.ratings.length">
    					<li v-show="needShow(rating.rateType,rating.text)" v-for="rating in food.ratings" class="rating-item ">
    						<div class="user">
    							<span class="name">{{rating.username}}</span>
    							<img :src="rating.avatar" width="12" height="12" alt="" class="avatar">
    						</div>
    						<div class="time">{{rating.rateTime| formatDate}}</div>
    						<p class="text">
    							<span class="iconfont" :class="{'icon-zan':rating.rateType===0,'icon-cai':rating.rateType===1}"></span>
    							{{rating.text}}
    						</p>
    					</li>
    					</ul>
    					<div class="no-rating" v-show="!food.ratings||!food.ratings.length">暂无评价</div>
    				</div> 
    			</div>

    		</div>
    	</div>
    </transition>
</template>

<script type="ecmascript-6">
import BScroll from 'better-scroll';
import Vue from 'vue';
import cartcontrol from '../cartcontrol/cartcontrol';
import split from '../split/split';
import ratingselect from '../ratingselect/ratingselect';
import {formatDate} from '../js/date';
const POSITIVE=0;
const NEGATIVE=1;
const ALL=2;
export default{
	props:{
		food:{
			type:Object
		}
	},
  data(){ 
  	return{
  		showFlag:false,
  		selectType:ALL,
  		onlyContent:true,
  		desc: {
          all: '全部',
          positive: '推荐',
          negative: '吐槽'
        }
  	}},
  	methods:{
  		show(){
  			this.showFlag=true;
  			selectType:ALL;
  		onlyContent:true;
  			this.$nextTick(()=>{
  				if(!this.scroll){
  					this.scroll= new BScroll(this.$refs.food,{
  						click:true
  					})
  				}else{
  					this.scroll.refresh();
  				}
  			})
  		},
  		hide(){
  			this.showFlag=false;
  		},
  		addFood(target){
  			this.$emit('add',target);
  		},
  		addFirst(event){
  			this.$emit('add',event.target);
  			Vue.set(this.food,'count',1);
  		},
  		selectRating(type){
  			this.selectType=type;
  			this.$nextTick(()=>{
  				this.scroll.refresh();
  			})
  		},
  		toggleContent(){
  			console.log(this.onlyContent);
  			this.onlyContent=!this.onlyContent;
  			this.$nextTick(()=>{
  				this.scroll.refresh();
  			})
  		},
  		needShow(type,text){
  			if(this.onlyContent&&!text){
  				return false;
  			}
  			if(this.selectType===ALL){
  				return true;
  			}else{
  				return type===this.selectType
  			}
  		}
  	},
  components:{
  	  cartcontrol,split,ratingselect
  },
  filters:{
  	formatDate(time){
  		let date=new Date(time);
  		return formatDate(date,'yyyy-MM-dd hh:mm');
  	}
  }
}
</script>

<style rel="stylesheet" lang="less">
  .food{
  	position: fixed;
  	left: 0;
  	top: 0;
  	bottom: 2.4rem;
  	z-index: 2;
  	width: 100%;
  	background-color: #fff;
  	transform:transite3d(0,0,0);
  	.image-header{
  		position: relative;
  		width: 100%;
  		height: 0;
  		padding-top: 100%;
  		img{
  		position: absolute;
  		top: 0;
  		left: 0;
  		width: 100%;
  		height: 100%;
  	}
  	}
  	.back{
  		position: fixed;
  		top: 0.5rem;
  		left:0.5rem; 
  		font-size: 20px;
  		color: #fff;
  	}
  	.content{
  		position: relative;
  		padding: 0.9rem;
  		.title{
  			line-height: 0.7rem;
  			margin-bottom: 0.4rem;
  			font-size: 14px;
  			font-weight: 700;
  			color: #07111b;
  		}
  		.detail{
  			margin-bottom: 0.6rem;
  			line-height: 0.5rem;
  			font-size: 0;
  		}
  		.sell-count,.rate{
  			font-size: 10px;
  			color: #93999f;
  		}
  		.sell-count{
  			margin-right: 0.6rem;
  		}
  		.price{
  			font-weight: 700;
  			line-height: 1.2rem;
  		}
  		.now{
  			margin-right: 0.4rem;
  			font-size: 14px;
  			color: #f01414;
  		}
  		.old{
  			font-size: 10px;
  			color:#93999f; 
  		}
  		.cartcontrol-wrapper{
  			position: absolute;
  			right: 0.6rem;
  			bottom: 0.6rem;
  		}
  		.buy{
  			position: absolute;
  			right: 0.9rem;
  			bottom: 0.9rem;
  			z-index: 2;
  			line-height: 1.2rem;
  			padding: 0 0.6rem;
  			box-sizing: border-box;
  			border-radius: 0.6rem;
  			font-size: 10px;
  			color: #fff;
  			background-color: #00a0dc;
  			opacity: 1;
  		}
  		.fade-enter-active, .fade-leave-active{
          transition: all 0.2s;
  		}
        .fade-enter, .fade-leave-active{
        	opacity: 0;
          z-index: -1;
        }   
  	}
  } 
    .move-enter-active, .move-leave-active{
  	 transition: all 0.2s linear;
  	 }
    .move-enter, .move-leave-active{
      transform: translate3d(100%, 0, 0)
    }
    .info{
    	padding: 0.9rem;
    .title{
    	line-height: 0.7rem;
    	margin-bottom: 0.3rem;
    	font-size: 14px;
    	color: #07111b;
    }
    .text{
    	line-height: 1.2rem;
    	padding:  0 0.4rem;
    	font-size: 12px;
    	color: #4d555d;
    }
    }
    .rating{
    	padding-top: 0.9rem;
    	.title{
    		line-height: 0.7rem;
    		margin-left: 0.9rem;
    		font-size: 14px;
    		color: #07111b;
    	}
    }
    .rating-wrapper{
    	padding:  0 0.9rem;
    	.rating-item{
    		position: relative;
    		padding: 0.8rem 0;
    	}
    	.user{
    		position: absolute;
    		right: 0;
    		top: 0.8rem;
    		line-height: 0.6rem;
    		font-size: 0;
    	}
    	.name{
    		display: inline-block;
    		margin-right: 0.3rem;
    		vertical-align: top;
    		font-size: 10px;
    		color: #93999f
    	}
    	.avatar{
    		width: 0.6rem;
    		height: 0.6rem;
    		border-radius: 50%;
    	}
    	.time{
    		margin-bottom: 0.3rem;
    		line-height: 0.6rem;
    		font-size: 0.5rem;
    		color: #93999f;
    	}
    	.text{
    		line-height: 0.8rem;
    		font-size: 0.6rem;
    		color: #07111b;
    	}
    	.icon-zan{
    	color: #00a0dc; 
    	 	}
    		.icon-cai{
    			color: #93999f;
    		}
    }
    .no-rating{
    	padding: 0.8rem 0;
    	font-size: 12px;
    	color: #93999f;
    }
</style>